---
id: dropdown
title: Dropdown
---

import Playground from '@theme/Playground';

## Hoverable

<Playground>
  <div class="dropdown dropdown--hoverable">
    <button class="button button--primary">Hover Me</button>
    <ul class="dropdown__menu">
      <li>
        <a class="dropdown__link" href="#url">
          Home
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Profile
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Settings
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Help
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Logout
        </a>
      </li>
    </ul>
  </div>
</Playground>

## Clickable

<Playground>
  <div class="dropdown">
    <button class="button button--secondary" data-toggle="dropdown">
      Click Me
    </button>
    <ul class="dropdown__menu">
      <li>
        <a class="dropdown__link" href="#url">
          Home
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Profile
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Settings
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Help
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Logout
        </a>
      </li>
    </ul>
  </div>
</Playground>

## Right-Aligned

<Playground>
  <div class="dropdown dropdown--right">
    <button class="button button--info" data-toggle="dropdown">
      Right-Aligned Long Children
    </button>
    <ul class="dropdown__menu">
      <li>
        <a class="dropdown__link" href="#url">
          This is a very long item
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          And so is this item
        </a>
      </li>
      <li>
        <a class="dropdown__link" href="#url">
          Who are you kidding, I'm the longessssssssst!
        </a>
      </li>
    </ul>
  </div>
</Playground>
